<template>
  <!-- 操作日志详情弹窗 -->
  <el-dialog
    title="操作日志详情"
    :visible.sync="logDetailVisible"
    width="700px"
    append-to-body
  >
    <div v-loading="logDetailLoading">
      <!-- 基本信息 -->
      <el-descriptions title="基本信息" :column="2" border>
        <el-descriptions-item label="文件名称">
          {{ logDetailData.fileName || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="操作类型">
          {{ logDetailData.operate || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="操作人员">
          {{ logDetailData.opeUser || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="操作时间">
          {{ logDetailData.createTime || "-" }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 操作结果 -->
      <el-divider></el-divider>
      <div class="result-section">
        <h4>操作结果</h4>
        <div class="ope-result">
          {{ formattedOpeResult }}
        </div>
      </div>

      <!-- 详细数据 -->
      <el-divider></el-divider>
      <div class="data-section">
        <h4>导入数据详情</h4>
        <div class="data-content">
          {{ formattedOpeDetail }}
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="logDetailVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getListLog } from "@/api/system/list";
export default {
  name: "LogDetailDialog",
  data() {
    return {
      logDetailVisible: false,
      logDetailData: {},
      logDetailLoading: false,
    };
  },
  computed: {
    // 格式化操作结果
    formattedOpeResult() {
      if (!this.logDetailData.opeResult) {
        return "暂无操作结果信息";
      }
      // 替换 HTML 换行标签为实际换行
      return this.logDetailData.opeResult
        .replace(/<br\/>/g, "\n")
        .replace(/<p style="color: red;">|<\/p>/g, "");
      //   return this.logDetailData.opeResult.replace(/<br\/>/g, "\n");
    },
    // 格式化操作详情
    formattedOpeDetail() {
      if (!this.logDetailData.opeDetail) {
        return "暂无详细数据";
      }

      try {
        const dataList = JSON.parse(this.logDetailData.opeDetail);
        if (!Array.isArray(dataList) || dataList.length === 0) {
          return "暂无详细数据";
        }

        // 将数据转换为易读的字符串格式
        return dataList
          .map((item, index) => {
            const itemStr = Object.keys(item)
              .map((key) => `${key}: ${item[key] || "空"}`)
              .join("； ");
            return `第${index + 1}条：${itemStr}`;
          })
          .join("\n\n");
      } catch (error) {
        console.error("解析操作详情失败:", error);
        return "数据解析失败";
      }
    },
  },
  methods: {
    // 打开弹窗（模拟接口请求）
    open() {
      this.logDetailVisible = true;
      this.logDetailLoading = true;
    },

    // 实际接口请求方法
    fetchDetail(logId) {
      this.logDetailVisible = true;
      this.logDetailLoading = true;

      getListLog(logId)
        .then((response) => {
          this.logDetailData = response.data;
          this.logDetailLoading = false;
        })
        .catch((error) => {
          this.logDetailLoading = false;
          this.$message.error("获取日志详情失败");
        });

      this.open();
    },

    // 关闭弹窗
    close() {
      this.logDetailVisible = false;
      this.logDetailData = {};
    },
  },
};
</script>

<style scoped>
.result-section,
.data-section {
  margin-top: 20px;
}

.result-section h4,
.data-section h4 {
  margin-bottom: 10px;
  color: #303133;
  font-weight: 500;
}

.ope-result {
  white-space: pre-line;
  line-height: 1.6;
  padding: 12px;
  background: #f0f9ff;
  border-radius: 4px;
  border-left: 4px solid #409eff;
  font-size: 14px;
}

.data-content {
  white-space: pre-line;
  line-height: 1.6;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e6e6e6;
  font-size: 13px;
  max-height: 300px;
  overflow-y: auto;
}
</style>